<template>
  <div class="chart-map-china" ref="chartRef"></div>
</template>

<script setup name="ChartMapChina">
import { nextTick, onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import registerChina from './registerChina'
import useResize from '../useResize'

/**
 * 地图图表
 */
const props = defineProps({
  option: {
    type: Object,
    default() {
      return {}
    },
  },
})

const chartRef = ref()
let chart = null

useResize(() => chart.resize())

// 渲染
function render() {
  if (props.option) {
    registerChina(echarts)
    chart = echarts.init(chartRef.value)
    chart.setOption(props.option)
  }
}

onMounted(() => {
  // 增加nextTick使echart获得正确的宽度
  nextTick(() => render())
})
</script>

<style lang="stylus" scoped>
.chart-map-china
  height 100%
</style>
